<template>
	<view class="department-add-container">
		<!-- 头部区域 -->
		<view class="header">
			<text class="title">{{ isEditMode ? '编辑部门' : '添加部门' }}</text>
			<text class="subtitle">{{ isEditMode ? '更新部门信息' : '创建新的部门信息' }}</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" class="department-form"
				label-position="top" label-width="auto">
				<uni-forms-item label="部门名称" required name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入部门名称" class="form-input"
						placeholderStyle="color: #a0b1c5;">
						<template v-slot:prefix>
							<uni-icons type="compose" size="20" color="#1a73e8"></uni-icons>
						</template>
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item label="排序值" required name="sort">
					<uni-easyinput v-model.number="valiFormData.sort" placeholder="数字越大排序越靠后" class="form-input"
						placeholderStyle="color: #a0b1c5;">
						<template v-slot:prefix>
							<uni-icons type="sort" size="20" color="#1a73e8"></uni-icons>
						</template>
					</uni-easyinput>
					<view class="hint-text">注：请输入0或正整数</view>
				</uni-forms-item>

				<view class="form-buttons">
					<button type="default" class="reset-button" @click="resetForm">重置</button>
					<button type="primary" class="submit-button"
						@click="submit('valiForm')">{{ isEditMode ? '更新部门' : '添加部门' }}</button>
				</view>
			</uni-forms>
		</view>

		<view class="decorative-element"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valiFormData: {
					name: '',
					sort: null,
					status: 0,
					create_date: new Date()
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
					sort: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}, {
							validate: (rule, value) => {
								return Number(value) >= 0;
							},
							errorMessage: '只能输入非负数字'
						}]
					},
				},
				isEditMode: false
			}
		},
		onLoad(options) {
			if (uni.$router.params?.type === 'edit' && uni.$router.params?._id) {
				this.isEditMode = true;
				// 实际项目中这里应该加载部门数据
				this.loadDepartmentData(uni.$router.params?._id);
			}else{
				this.isEditMode = false;
			}
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.valiFormData.sort = Number(this.valiFormData.sort)
					const obj = uniCloud.importObject('basedata')

					// 实际项目中根据编辑/添加模式调用不同API
					const action = this.isEditMode ? 'updateDepartment' : 'addDepartment';

					obj[action](this.valiFormData).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.message,
								icon: 'success',
								duration: 1500,
								success: () => {
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					console.log('表单验证失败', err);
				})
			},

			resetForm() {
				this.valiFormData = {
					name: '',
					sort: null,
					status: 0,
					create_date: new Date()
				};
			},

			loadDepartmentData(id) {
				// 实际项目中加载部门数据
				const obj = uniCloud.importObject('basedata');
				obj.getDepartmentById(id).then(res => {
				  if (res.code === 0) {
					  console.log(res,'1111')
				    this.valiFormData = res.data;
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.department-add-container {
		background: linear-gradient(135deg, #e6f0ff 0%, #f0f7ff 100%);
		min-height: 100vh;
		padding: 30rpx;
		position: relative;
		overflow: hidden;
	}

	.header {
		padding: 40rpx 0 30rpx;
	}

	.title {
		font-size: 46rpx;
		font-weight: bold;
		color: #1a4e8e;
		display: block;
	}

	.subtitle {
		font-size: 28rpx;
		color: #5a7ea0;
		display: block;
		margin-top: 10rpx;
	}

	.form-container {
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(26, 115, 232, 0.1);
		margin-top: 30rpx;
		border: 1rpx solid #d0e3ff;
	}

	.department-form {
		padding: 10rpx;
	}

	::v-deep .uni-forms-item__label {
		font-weight: bold;
		color: #1a4e8e !important;
		font-size: 32rpx;
		margin-bottom: 15rpx;
		padding-left: 10rpx;
	}

	.form-input {
		background: #f9fbfe;
		border-radius: 16rpx;
		border: 1rpx solid #d0e3ff;
		padding: 18rpx 25rpx 18rpx 65rpx;
		font-size: 30rpx;
		color: #2c3e50;
		transition: all 0.3s;
		box-sizing: border-box;
	}

	.form-input:focus {
		border-color: #1a73e8;
		box-shadow: 0 0 0 4rpx rgba(26, 115, 232, 0.15);
	}

	.hint-text {
		font-size: 26rpx;
		color: #5a7ea0;
		margin-top: 10rpx;
		padding-left: 15rpx;
	}

	.form-buttons {
		display: flex;
		justify-content: center;
		margin-top: 60rpx;
		gap: 40rpx;
	}

	.reset-button {
		width: 220rpx;
		height: 85rpx;
		line-height: 85rpx;
		background: #f0f7ff;
		color: #1a73e8;
		border: 1rpx solid #1a73e8;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		transition: all 0.3s;
	}

	.reset-button:active {
		background: #e1ecff;
		transform: translateY(4rpx);
	}

	.submit-button {
		width: 220rpx;
		height: 85rpx;
		line-height: 85rpx;
		background: linear-gradient(90deg, #1a73e8, #4d9aff);
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(26, 115, 232, 0.3);
		transition: all 0.3s;
	}

	.submit-button:active {
		transform: translateY(4rpx);
		box-shadow: 0 4rpx 10rpx rgba(26, 115, 232, 0.3);
	}

	.decorative-element {
		position: absolute;
		bottom: -100rpx;
		right: -100rpx;
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(26, 115, 232, 0.1) 0%, rgba(77, 154, 255, 0.05) 100%);
		z-index: 0;
	}
</style>